<template>
  <div class="invite">
    <section>
      <img src="//static.adbaitai.com/agent/img/invite1.png" alt="">
    </section>
    <section>
      <img src="//static.adbaitai.com/agent/img/invite2.png" alt="">
    </section>
    <section>
      <img src="//static.adbaitai.com/agent/img/invite3.png" alt="">
    </section>
    <section class="qrcode">
      <div class="qrcode-img">
        <img :src="qrCodeImg" alt="">
      </div>
      <img src="//static.adbaitai.com/agent/img/invite4.png" alt="">
    </section>
    <section>
      <img src="//static.adbaitai.com/agent/img/invite5.png?t=20170526" alt="">
    </section>
    <section class="invite-code">
      <div class="code">
        {{inviteCode}}
      </div>
      <img src="//static.adbaitai.com/agent/img/invite6.png" alt="">
    </section>
  </div>
</template>

<script>
  import { axiosGet, axiosPost } from '../../assets/js/api'
  import Utils from '../../assets/js/utils'
  import { WxShare } from '../../assets/js/share'
  import { Indicator } from 'mint-ui'
  import { mapGetters } from 'vuex'

  export default {
    computed: {
      ...mapGetters(['mpOpenId'])
    },
    data () {
      return {
        qrCodeImg: '',
        inviteCode: ''
      }
    },
    mounted () {
      WxShare()
      this.changeTitle()
      this.fetchInfo()
    },
    watch: {
      "mpOpenId": function () {
        this.fetchInfo()
      }
    },
    methods: {
      changeTitle () {
        Utils.changeTitle('招募合伙人')
      },
      fetchInfo () {
        const mpOpenId = Utils.getQueryString(window.location.href, 'mpOpenId') || this.mpOpenId;
        if (!mpOpenId) return;
        Indicator.open('加载中...')
        const self = this;
        axiosGet('/api/public/weixin/getInviteCode?mpOpenId=' +encodeURI(mpOpenId))
          .then((response) => {
            Indicator.close()
            if (response.success) {
              self.qrCodeImg = response.data.qrCodeImg
              self.inviteCode = response.data.inviteCode
              return
            }
            alert(response.msg || '系统错误，请重试！')
          }, (error) => {
            Indicator.close()
            alert(error.msg || '系统错误，请重试！')
          })
      }
    }
  }
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
.invite {
  margin: 0;
  padding: 0;
  border: none;
  background: #fb945c;
  height: 100%;
  .invite-code {
    position: relative;
    .code {
      text-align: center;
      position: absolute;
      left: 2.1rem;
      top: 0.15rem;
      width: 3.4rem;
      height: 0.63rem;
      line-height: 0.63rem;
      background: #F5F5F5;
      border: 1px solid #D1D1D1;
      color: #c64c39;
      font-size: 0.38rem;
    }
  }
  .qrcode {
    position: relative;
    .qrcode-img {
      background: #ededed;
      padding: 0.1rem;
      position: absolute;
      left: 1.4rem;
      top: 1.2rem;
      width: 2.16rem;
      height: 2.16rem;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }
  > section {
    display: block;
    > img {
      width: 100%;
      height: 100%;
      display: block;
    }
  }
}
</style>
